<template>
  <div>
    <router-view />
    <van-tabbar v-model="active" route active-color="#ee0a24" inactive-color="#000" animated>
      <van-tabbar-item replace to="/apphome" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item replace to="/appCategory" badge="" icon="more-o">分类</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o" replace to="/cart">购物车</van-tabbar-item>
      <van-tabbar-item replace to="/appPerson" icon="friends-o">我的</van-tabbar-item>
    </van-tabbar>

    <van-share-sheet v-model="showShare" :options="options" />
  </div>
</template>

<script>
import Vue from 'vue';
import { Tabbar, TabbarItem } from 'vant';
import { ShareSheet } from 'vant';
import { Button } from 'vant';

Vue.use(Button);
Vue.use(ShareSheet);
Vue.use(Tabbar);
Vue.use(TabbarItem);
export default {
  data(){
    return{
      active: 0,
      showShare: false,
      options: [
        {
          name: '名称',
          icon: 'https://img01.yzcdn.cn/vant/custom-icon-fire.png',
        },
        {
          name: '名称',
          icon: 'https://img01.yzcdn.cn/vant/custom-icon-light.png',
        },
        {
          name: '名称',
          icon: 'https://img01.yzcdn.cn/vant/custom-icon-water.png',
        },
      ],
    }
  },
  methods:{

  }
}
</script>

<style scoped>
>>> .van-tabbar--fixed{
  z-index: 2000;
}
</style>
